<script setup>
import {BaseURL} from "../utils/lshttp";
import {goldRedeem} from "./gold_duihuan";

const {
  redeemList,
  config,
  scrollTop,
  listMenu,
  okBack,
  click,
  redeem,
} = goldRedeem()

</script>

<template>
  <view class="content">
    <view class="navbar"
          :style="{background: `rgba(253, 138, 60, ${scrollTop/88 > 0.92 ? 0.92 : scrollTop/88})`}">
      <u-status-bar></u-status-bar>
      <view class="back_content" @click="okBack">
        <view style="padding-left: 30rpx;"></view>
        <u-icon name="arrow-left" color="#FFFFFF" size="20"></u-icon>
        <text
            style="font-weight: 400;font-size: 36rpx;line-height: 44px;height:44px;position: absolute;width: 100%;text-align: center;">
          金币兑换
        </text>
      </view>
    </view>
    <view class="navbar1">
      <u-status-bar></u-status-bar>
      <view class="back_content">
      </view>
    </view>
    <view class="topContent">
      <view class="price_btn">
        <view class="l_price">当前可用金币：
          <text>{{ config.my_gold_coin }}</text>
        </view>
        <navigator open-type="navigateBack" class="zq_btn">去赚金币</navigator>
      </view>
    </view>
    <view style="width: 750rpx;border-radius: 30rpx 30rpx 0 0;background-color: #F6F6F6;padding: 0 0 20rpx;height: 100%;">
      <up-tabs :list="listMenu" @click="click" lineWidth="30" line-height="5"
               lineColor="#f56c6c"
               :scrollable="false"
               :activeStyle="{color: '#FC7649',transform: 'scale(1.02)',fontSize: '26rpx'}"
               :inactiveStyle="{color: '#3D3D3D',transform: 'scale(1)',fontSize: '26rpx'}"
               itemStyle="padding-left: 15px; padding-right: 15px; height: 50px;">
      </up-tabs>
      <view
          style="display: flex;flex-wrap: wrap;align-items: center;width:710rpx;margin: 0 20rpx">
        <up-col span="6" justify="center" text-align="center" customStyle="margin-top: 30rpx"
                v-for="(item, index) in redeemList" :key="index">
          <view class="item_content" :data-url="item">
            <image :src="BaseURL + item.picture" style="width: 100%;height: 224rpx;margin: auto"></image>
            <view class="name">{{ item.title }}</view>
            <view class="gold_coins">{{ item.price }}金币</view>
            <view class="r_btn" style="margin: 26rpx auto 0" @click="redeem(item.id)">兑换</view>
          </view>
        </up-col>
      </view>
      <view style="height: 100rpx"></view>
      <u-safe-bottom></u-safe-bottom>
    </view>
  </view>
</template>
<style lang="scss">
page {
  background: #F6F6F6 url('https://lsz.lszbg.com/imgs/images/gold_bg.png') no-repeat -3rpx -10rpx;
  background-size: cover;
  height: 100%;
  width: 102%;
}
.content{
  height: 100%;
}
</style>
<style scoped lang="scss">
.navbar {
  position: fixed;
  z-index: 1000;
  width: 100%;
  top: 0;
}

.back_content {
  color: #FFFFFF;
  display: flex;
  align-items: center;
  height: 44px;
}

.topContent {
  padding: 30rpx 0 6rpx;
}

.price_btn {
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-sizing: border-box;
  padding: 30rpx 30rpx;

  .l_price {
    display: flex;
    align-items: center;
    font-size: 28rpx;
    color: #fff;
    font-weight: bold;
    text-shadow: 0 3px 6px rgba(255, 64, 0, 0.5);

    text {
      font-size: 40rpx;
    }
  }

  .zq_btn {
    width: 120rpx;
    height: 50rpx;
    background-color: #FFE098;
    border-radius: 6rpx;
    font-size: 24rpx;
    color: #FE4D33;
    line-height: 50rpx;
    text-align: center;
  }
}

.item_content {
  margin: auto;
  width: 316rpx;
  height: 408rpx;
  box-shadow: 0 6rpx 8rpx 0 rgba(0, 0, 0, 0.1);
  background: #FFFFFF;
  border-radius: 10rpx;

  .name {
    font-weight: bold;
    font-size: 28rpx;
    color: #333333;
    line-height: 28rpx;
  }

  .gold_coins {
    font-weight: 400;
    font-size: 30rpx;
    color: #ff8b2c;
    line-height: 36rpx;
    margin-top: 20rpx;
  }
}

.r_btn {
  width: 188rpx;
  height: 56rpx;
  background: linear-gradient(90deg, #FC754A 0%, #FE9E54 100%);
  border-radius: 50rpx;
  line-height: 56rpx;
  text-align: center;
  font-size: 24rpx;
  color: #fff;
  box-shadow: 0 0 16rpx #FC754AAA;
  letter-spacing: 6rpx;

  &.fisih_btn {
    background: linear-gradient(270deg, #9B9B9B 0%, #777777 100%);
  }
}
//  修改优化 挑战赛页面，修改优化福利页面，修改优化金币兑换
</style>